<template>
	<view class="container">
		<uni-nav-bar fixed="true" color="#ffffff" :border="false"
			background-color="linear-gradient(-90deg, #ED602B, #F19136)" :status-bar="true" title="我的" />
		<view class="content">
			<view class="bg"></view>
			<view class="user-infor">
				<image class="avatar" :src="memberInfo.logo" mode="aspectFill"></image>
				<view class="nick-name ell">{{memberInfo.nickName}}</view>
				<view class="num-wrapper">
					<view class="num-item" @click="wallet">
						<view class="num">{{memberInfo.balance}}</view>
						<view class="title">余额（元）</view>
					</view>
					<view class="num-item" @click="integral">
						<view class="num">{{memberInfo.score}}</view>
						<view class="title">积分（分）</view>
					</view>
				</view>
			</view>
			<view class="nav-list">
				<!-- :open-type="nav.openType" -->
				<button class="nav-item border-top" v-for="(nav, index) in navList" @click="details(nav.path)"
					:key="index">
					<image class="icon" :src="nav.icon"></image>
					<view class="title">{{nav.title}}</view>
					<image class="next" src="/static/next.png"></image>
				</button>
			</view>
		</view>
		<tabBar v-if="loads"></tabBar>
		<view class="tab-bar-place"></view>
<!-- 		<getPhones ref="getPhones"></getPhones> -->
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import tabBar from '@/components/tab-bar/index.vue'
	import getPhones from '@/components/getPhones/index.vue'
	export default {
		components: {
			uniNavBar,
			tabBar,
			getPhones
		},
		data() {
			return {
				navList: [{
						icon: '/static/qb.png',
						title: '我的钱包',
						path: '/pages/user/wallet'
					},
					{
						icon: '/static/ddan.png',
						title: '我的订单',
						path: '/pages/order/index'
					},
					{
						icon: '/static/grxx.png',
						title: '个人信息',
						path: '/pages/user/user-infor'
					},
					{
						icon: '/static/dzhi.png',
						title: '收货地址管理',
						path: '/pages/address/index'
					},
					{
						icon: '/static/kf.png',
						title: '联系客服',
						path: 'contact'
						// openType: 'contact'
					},
					{
						icon: '/static/hzuo.png',
						title: '我要合作',
						path: '/pages/user/cooperation'
					}
				],
				loads: false
			}
		},
		computed: {
			memberInfo() {
				return this.$store.getters.userInfo
			}
		},
		onLoad() {

		},
		onShow() {
			this.$store.dispatch('user/getUserInfo')
			let that = this
			setTimeout(function() {
				console.log("asdasda")
				that.loads = true
			}, 100);
			// const token = uni.getStorageSync('token');
			// this.$nextTick(() => {
			// 	if (token) {
			// 		this.$refs.getPhones.show()
			// 	}
			// })

		},
		methods: {
			details(url) {
				const that = this
				switch (url) {
					case 'contact':
						uni.makePhoneCall({
							phoneNumber: that.memberInfo.customerMobile
						})
						break
					default:
						uni.navigateTo({
							url: `${url}?from=user`
						})
				}
			},
			wallet() {
				uni.navigateTo({
					url: '/pages/user/wallet'
				})
			},
			integral() {
				uni.redirectTo({
					url: '/pages/integral/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 1500rpx;
	}


	.bg {
		width: 100%;
		height: 176rpx;
		background: linear-gradient(-90deg, #ED602B, #F19136);
	}

	.user-infor {
		padding-top: 38rpx;
		margin: -176rpx 30rpx 0;
		height: 351rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		box-shadow: 0px 2rpx 10rpx 0px rgba(199, 197, 197, 0.23);
		border-radius: 10rpx;

		.avatar {
			display: block;
			margin: 0 auto;
			width: 101rpx;
			height: 101rpx;
			border-radius: 50%;
			background-color: #F5F5F5;
		}

		.nick-name {
			margin-top: 16rpx;
			line-height: 42rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: 500;
			color: #000000;
		}

		.num-wrapper {
			display: flex;
			margin-top: 35rpx;

			.num-item {
				position: relative;
				flex: 1;
				text-align: center;

				&:first-child::after {
					content: " ";
					position: absolute;
					right: 0;
					top: 25rpx;
					bottom: 27rpx;
					border-right: 1px solid #E5E5E5;
				}

				.num {
					line-height: 54rpx;
					font-size: 44rpx;
					font-weight: 400;
					color: #ED602B;
				}

				.title {
					margin-top: 6rpx;
					line-height: 35rpx;
					font-size: 25rpx;
					font-weight: 400;
					color: #333333;
				}
			}
		}
	}

	.nav-list {
		margin-top: 20rpx;

		.nav-item {
			position: relative;
			display: flex;
			padding: 33rpx 30rpx 0 39rpx;
			height: 100rpx;
			box-sizing: border-box;
			background-color: #fff;

			&:before {
				left: 30rpx;
				right: 30rpx;
				bottom: 0;
				top: auto;
			}

			.icon {
				width: 38rpx;
				height: 38rpx;
			}

			.title {
				flex: 1;
				margin-left: 17rpx;
				text-align: left;
				line-height: 38rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #000000;
			}

			.next {
				margin-top: 5rpx;
				width: 14rpx;
				height: 26rpx;
			}
		}
	}
</style>
